<template>
  <div class="tab-model">
    <p
      class="more-model"
      :class="{ active: selectedTab === 'more-model' }"
      @click="selectTab('more-model')"
    >
      <img
        src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngf14066f1f81f0b458e1ee43828b7036ec4902fdf99591768f166045a2e4bdaa6?noCache=true"
      />
    </p>
    <ul class="more-model-ul">
      <li
        v-for="(item, index) in items"
        :key="index"
        :class="{ active: selectedTab === `li-${index}` }"
        @click="selectTab(`li-${index}`)"
      >
        <img :src="item.img" alt="" />
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"

// 定义props
const props = defineProps({
  selectedTab: {
    type: String,
    default: "more-model",
  },
  items: {
    type: Array,
    default: () => [
      {
        img: "https://lanhu-oss-2537-2.lanhuapp.com/SketchPng057467f1563258f2022c54555d01ba3d8845826bf1cf88666fd52f2ab64a0fcf?noCache=true",
      },
      {
        img: "https://lanhu-oss-2537-2.lanhuapp.com/SketchPngff4af0de25e9573f0fa3255c84a03fe119cce1b7995081fa4e5c9db6f14303c2?noCache=true",
      },
      {
        img: "https://lanhu-oss-2537-2.lanhuapp.com/SketchPng77f31c33a8bf876fab4994a5ea084ffd4103c5b18918d519e3c25b84025eeed5?noCache=true",
      },
      {
        img: "https://lanhu-oss-2537-2.lanhuapp.com/SketchPng9216329a9420cc17b36ad511065d07b4f0c7e4af8f66b530f63055dbc8a0137c?noCache=true",
      },
      {
        img: "https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd2f9d7bf666a120becf827313ce999c600bd1f770177614a95d73fb80dd0dc1c?noCache=true",
      },
    ],
  },
})

// 定义事件
const emit = defineEmits(["tab-change"])

// 选择选项卡的方法
const selectTab = (tab) => {
  emit("tab-change", tab)
}
</script>

<style scoped>
.more-model {
  width: 44px;
  height: 36px;
  background: #f6f7f9;
  border-radius: 18px;
  position: relative;
  cursor: pointer;
}
.more-model.active {
  border-radius: 18px;
  background: #fff1f6;
  border: 1px solid #ff3f81;
}
.more-model img {
  width: 18px;
  height: 18px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.tab-model {
  display: flex;
  align-items: center;
}
.more-model-ul {
  display: flex;
  background: #f6f7f9;
  border-radius: 18px;
  margin-left: 12px;
}
.more-model-ul li {
  width: 52px;
  height: 36px;
  position: relative;
  cursor: pointer;
}
.more-model-ul li.active {
  border-radius: 18px;
  background: #fff1f6;
  border: 1px solid #ff3f81;
}
.more-model-ul img {
  width: 22px;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
